<template>
  <div class="water-pressure-status">
    <div class="status-head">
      <div class="status-head-left">设备近10天水压状态</div>
      <div class="status-head-right">
        <div class="fireplug-number">消防栓编号 {{device ? device.fireplugId : ''}}</div>
        <div class="fireplug-position">位置 {{position}}</div>
      </div>
    </div>
    <div class="status-chart" id="status-chart"></div>
  </div>
</template>

<script>
  import Config from  '../../config'
  // import {regionDataPlus} from 'element-china-area-data'
  import {regionDataPlus} from 'static/js/regionData'
  export default {
    name: 'WaterPressureStatus',
    props: {
      device: {
        type: Object,
        default () {
          return null
        }
      }
    },
    data () {
      return {
        chart: null
      }
    },
    watch: {
      device (v) {
        console.log(v)
        this.getLatestTenDaysStatus()
      }
    },
    computed: {
      position () {
        if (this.device) {
          return this.getAddress()
        } else {
          return''
        }
      }
    },
    methods: {
      /**
       * 获取地址
       * */
      getAddress () {
        const device = this.device
        try {
          const province = this.getAreaObj(regionDataPlus, device.province)
          const city = this.getAreaObj(province.children, device.city)
          const district = this.getAreaObj(city.children, device.district)
          return `${province.label}${city.label}${district.label}`
        } catch (e) {
          return ''
        }
      },
      /**
       * 获取区域信息
       * @param {Array} arr
       * @param {String} value
       * @return {Object} obj
       * */
      getAreaObj (arr, value) {
        let obj = null
        arr.some(item => {
          if (value === item.value) {
            obj = item
            return true
          }
        })
        return obj
      },
      /**
       * 获取设备近10天水压状态
       * */
      getLatestTenDaysStatus () {
        const DAYS = 10
        const url = `${Config.FIREPLUG_APP_URL}/fireplug/range`
        const today = new window.Date()
        const tenDayBefore = this.$util.Date.getBeforeAfter(today, -DAYS)
        const param = {
          imei: this.device.imei,
          start: tenDayBefore.getTime(),
          end: today.getTime()
        }
        this.$http.get(url, param)
          .then(data => {
            console.log(data)
            const tempDate = today
            const waterPressureArray = []
            const chartData = this.createChartData(tempDate, waterPressureArray, DAYS)
            console.log(chartData)
            this.drawChart(chartData)
          })
          .catch(e => console.log(e))
      },
      /**
       * @param Date 当前日期
       * @param Object 已安装对象
       * @param Object 已上线对象
       * @param Number 天数
       * */
      createChartData (dateObj, waterPressureArray, days) {
        const xAxis = []
        const series = [
          {
            name: "水压",
            type: 'bar',
            smooth: true,
            data: [],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#fff'
                  }
                },
                barBorderRadius: 500,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: '#2390ff'
                }, {
                  offset: 1,
                  color: '#42fff8'
                }]),//线条渐变色',
              }
            }
          }
        ]
        const start = -(days - 1) // 当前日期往前推days天，包括今天
        for (let i = start; i <= 0; i++) {
          const targetDate = this.$util.Date.getBeforeAfter(dateObj, i)
          const year = this.$util.Date.getYear(targetDate)
          const month = this.$util.Date.getMonth(targetDate)
          const date = this.$util.Date.getDate(targetDate)
          const dateStr = `${year}-${month}-${date}`
          xAxis.push(dateStr)
          // series[0].data.push(this.getCountByDate(waterPressureArray, dateStr))
          series[0].data.push(parseFloat(Math.random()).toFixed(2))
        }
        return {xAxis, series}
      },
      /**
       * 获取当天的水压
       * @param {String}  str 具体某天
       * */
      getCountByDate (waterPressureArray, str) {
        let pressure = 0
        waterPressureArray.some(item => {
          const targetDate = new window.Date(item.wptime)
          const temYear = this.$util.Date.getYear(targetDate)
          const temMonth = this.$util.Date.getMonth(targetDate)
          const temDay = this.$util.Date.getDate(targetDate)
          const temStr = `${temYear}-${temMonth}-${temDay}`
          if (str === temStr) {
            pressure = item.wpdata
            return true
          }
        })

        return pressure
      },
      /**
       * 绘制echarts图
       * @param Object {xAxis, series}
       * */
      drawChart (data) {
        // 基于准备好的dom，初始化echarts实例
        const dom = document.getElementById('status-chart')
        if (!dom) {
          return
        }
        this.chart = this.$echarts.init(dom)
        // 绘制图表
        this.chart.setOption({
          title: { text: '' },
          // tooltip: {
          //   backgroundColor: '#fff',
          //   formatter: function (params, ticket, callback) {
          //     const res = `<div style="color: #3C81FF;">${params.data}辆</div>  <div style="color: #999;">${params.name}</div>`
          //     return res
          //   },
          //   axisPointer: {
          //     type: 'line',
          //     shadowStyle: {
          //       color: {
          //         type: 'radial',
          //         x: 0.5,
          //         y: 0.5,
          //         r: 0.5,
          //         colorStops: [{
          //           offset: 0, color: 'red' // 0% 处的颜色
          //         }, {
          //           offset: 1, color: 'blue' // 100% 处的颜色
          //         }],
          //         globalCoord: false // 缺省为 false
          //       }
          //     }
          //   }
          // },
          xAxis: {
            data: data.xAxis,
            axisLine: {
              lineStyle: {
                color: '#0F59BE'
              }
            }
          },
          // x轴和y轴文字
          axisLabel: {
            color: '#9FC5FF'
          },
          yAxis: {
            show: true,
            axisLine: {
              lineStyle: {
                color: '#0F59BE'
              }
            },
            axisLabel: {
              formatter: "{value} MPa"
            },
            splitLine: {
              lineStyle: {
                color: '#0F59BE'
              }
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: '#123178',
                opacity: 0.45
              }
            }
          },
          color: ['#3E7EFF'],
          series: data.series,
          grid: {
            x: 80,
            y: 30,
            x2: 30,
            y2: 30,
            borderWidth: 1
          },
          barWidth: 28
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .water-pressure-status {
    flex: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 55px;
    .status-head {
      height: 20px;
      margin-bottom: 30px;
      display: flex;
      justify-content: space-between;
      .status-head-left {
        color: #12CEFF;
        font-size: 14px;
      }
      .status-head-right {
        color: #9FC5FF;
        font-size: 12px;
        display: flex;
        justify-content: flex-start;
        .fireplug-number {
          margin-right: 30px;
        }
      }
    }
    .status-chart {
      flex: 1;
    }
  }
</style>
